import React from 'react';
import { createRoutesFromElements, createBrowserRouter, Route } from "react-router-dom";
import Layout from "./components/Layout/Layout";
import Home from "./components/Home/Home";
import Profile from "../features/profile/Profile";
import CategoryComponent, { resolver as categoryResolver } from  "../features/categories/Category";

export const routes = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={<Layout />}>
            <>
                <Route index element={<Home />} />
                <Route path="profile" element={<Profile />} />
                <Route path="categories">
                    <Route
                        path=":key"
                        loader={categoryResolver}
                        element={<CategoryComponent />}
                    />
                </Route>
                <Route path="*" element={<h1>404</h1>} />
            </>
        </Route>
    )
);
